<template>
  <div>
    <div class="his-hot" v-show="isShowHis">
      <div class="head">
        <h4>历史记录</h4>
        <van-icon @click="clearHis" name="delete-o" />
      </div>
      <div class="body">
        <van-tag @click="tagClick(item)" v-for="(item, i) in historyList" :key="i" plain round type="default">{{item}}</van-tag>
      </div>
    </div>
    <div class="his-hot">
      <div class="head">
        <h4>搜索发现</h4>
        <van-icon name="eye-o" />
      </div>
      <div class="body">
        <van-tag @click="tagClick(item.keyword)" v-for="(item, i) in hotList" :key="i" :class="item.is_hot === 1 ? 'red' : ''" plain round type="default">{{item.keyword}}</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { clearHistory } from '@/request/api'
export default {
  props: ["historyList", "hotList"],
  data () {
    return {
      // 显示历史记录盒子
      isShowHis: true
    }
  },
  methods: {
    // 点击标签触发该事件
    tagClick(val) {
      this.$emit('tagClick', val)
    },
    // 点击清除历史记录
    clearHis() {
      clearHistory().then(res => {
        if (res.errno === 0) {
          this.isShowHis = false
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.his-hot {
  background-color: #fff;
  .head {
    display: flex;
    padding: 1rem;
    h4 {
      margin-right: 1rem;
    }
  }
  .body {
    padding: 0rem 1rem 1rem;
    .van-tag {
      background: #efefef;
      padding: .5rem;
      margin: 0rem .5rem 1rem;
      border: 1px solid #efefef;
    }
    .red {
      color: red;
      border: 1px solid red;
    }
  }
}
</style>
